import {
  deepClone
} from '@/utils/index'
import SignPad from '@/components/form/SignPad/index'
import PhoneVerification from '@/components/form/PhoneVerification/index'
import {
  upload
} from '../verifition/api/verifition-api'

const componentChild = {}
/**
 * 将./slots中的文件挂载到对象componentChild上
 * 文件名为key，对应JSON配置中的__config__.tag
 * 文件内容为value，解析JSON配置中的__slot__
 */
const slotsFiles = require.context('./slots', false, /\.js$/)
const keys = slotsFiles.keys() || []
keys.forEach(key => {
  const tag = key.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = slotsFiles(key).default
  componentChild[tag] = value
})

function vModel(dataObject, defaultValue) {
  let config = dataObject.attrs.__config__
  // 表单组件特殊处理
  // console.log(defaultValue)
  if (config.tag === 'el-upload') {
    if (defaultValue) {
      dataObject.attrs['file-list'] = defaultValue
    }
    // 增加上传回调事件
    dataObject.attrs['on-success'] = (response, file, fileList) => {
      this.$emit('upload', response, file, fileList)
    }
    dataObject.attrs['on-remove'] = (file, fileList) => {
      this.$emit('deleteUpload', file, fileList)
    }
    // dataObject.attrs['before-remove'] = (file, fileList) => {
    //   // eslint-disable-next-line vue/custom-event-name-casing
    //   // this.$emit('deleteUpload', file, fileList)
    //   this.$confirm('确定删除吗?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     this.$emit('deleteUpload', file, fileList) // 在这里真正的处理图片列表
    //     return false; // 这是重点,不管上面的操作结果如何都返回false
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消删除'
    //     });
    //     return false; // 这是重点,不管上面的操作结果如何都返回false
    //   });
    //   return false; // 这是重点,不管上面的操作结果如何都返回false
    // }
    dataObject.attrs['on-preview'] = (file) => {
      // console.log(file)
      this.$bus.emit('send', file)
    }
    // eslint-disable-next-line no-unused-vars
    dataObject.attrs['on-exceed'] = (files, fileList) => {
      this.$message.error(`最多上传${config.defaultValue.length}个文件`)
    }
    dataObject.attrs['on-change'] = (file, fileList) => {
      // console.log(file)
        const isJPG = file.raw.type === "image/jpeg" || file.raw.type === "image/png" || file.raw.type === "image/jpg";
        let sizeUnitNum = 1
        // 文件大小判断
        switch (config.sizeUnit) {
          case 'KB':
            sizeUnitNum = 1024
            break
          case 'MB':
            sizeUnitNum = 1024 * 1024
            break
          case 'GB':
            sizeUnitNum = 1024 * 1024 * 1024
            break
        }
        let totalSize = config.fileSize * sizeUnitNum
        if (file.size > totalSize) {
          this.$message.error(`上传图片大小不能超过${config.fileSize}${config.sizeUnit}`)
          return false
        } else if (!isJPG) {
          this.$message.error('请上传格式为jpg/png的图片')
        } else {
          const formData = new FormData();
          formData.append("file", file.raw);
          const query = {
            file_type: "neijing_history",
            file_name: file.name,
            file_ext: file.name.split(".").pop(),
            file_size: file.size,
          };
          upload(formData, query).then(res => {
            // console.log(res)
            const response = {
              code: 200,
              data: res.url,
              msg: null,
              file_id: res.file_id,
            }
            fileList[fileList.length - 1].Id = res.file_id
            fileList[fileList.length - 1].url = res.url
            // console.log(fileList, 'fileList')
            this.$emit('upload', response, file, fileList, defaultValue)
          })
        }
    }
    dataObject.attrs['before-upload'] = file => {
      console.log(file)
    }
    // 分页组件
  } else if (config.tag === 'pagination') {
    dataObject.on.prev = val => {
      this.$emit('prev', val)
    }
    dataObject.on.next = val => {
      this.$emit('next', val)
    }
  } else {
    dataObject.props.value = defaultValue

    dataObject.on.input = val => {
      this.$emit('input', val)
    }
  }

}

function mountSlotFlies(h, confClone, children) {
  const childObjs = componentChild[confClone.__config__.tag]
  if (childObjs) {
    Object.keys(childObjs).forEach(key => {
      const childFunc = childObjs[key]
      if (confClone.__slot__ && confClone.__slot__[key]) {
        children.push(childFunc(h, confClone, key, this))
      }
    })
  }
}

function emitEvents(confClone) {
  ['on', 'nativeOn'].forEach(attr => {
    const eventKeyList = Object.keys(confClone[attr] || {})
    eventKeyList.forEach(key => {
      const val = confClone[attr][key]
      if (typeof val === 'string') {
        confClone[attr][key] = event => this.$emit(val, event)
      }
    })
  })
}

function buildDataObject(confClone, dataObject) {
  Object.keys(confClone).forEach(key => {
    const val = confClone[key]
    if (key === '__vModel__') {
      vModel.call(this, dataObject, confClone.__config__.defaultValue)
    } else if (dataObject[key]) {
      dataObject[key] = {
        ...dataObject[key],
        ...val
      }
    } else {
      dataObject.attrs[key] = val
    }
  })

  // 清理属性
  clearAttrs(dataObject)
}

function clearAttrs(dataObject) {
  delete dataObject.attrs.__config__
  delete dataObject.attrs.__slot__
  delete dataObject.attrs.__methods__
}

function makeDataObject() {
  return {
    attrs: {},
    props: {},
    nativeOn: {},
    on: {},
    style: {}
  }
}

export default {
  components: {
    SignPad,
    PhoneVerification
  },
  props: {
    conf: {
      type: Object,
      required: true
    }
  },
  render(h) {
    const dataObject = makeDataObject()
    const confClone = deepClone(this.conf)
    const children = this.$slots.default || []
    // 如果slots文件夹存在与当前tag同名的文件，则执行文件中的代码
    mountSlotFlies.call(this, h, confClone, children)

    // 将字符串类型的事件，发送为消息
    emitEvents.call(this, confClone)

    // 将json表单配置转化为vue render可以识别的 “数据对象（dataObject）”
    buildDataObject.call(this, confClone, dataObject)

    return h(this.conf.__config__.tag, dataObject, children)
  }
}
